<template>
  <div class="main-layout">
    <AppHeader :activeKey="activeKey" @logout="handleLogout" :username="username" :isSuperiorAccount="isSuperiorAccount" />
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import AppHeader from './AppHeader.vue';

const props = defineProps({
  username: {
    type: String,
    default: ''
  }
});

// 设置默认用户名，实际应用中应该从登录状态或API获取
const username = ref(props.username || localStorage.getItem('username') || '医生');
// 判断是否为上级账号
const isSuperiorAccount = ref(localStorage.getItem('accountType') === 'superior');

const router = useRouter();
const route = useRoute();

// Compute the active key based on the current route path
const activeKey = computed(() => {
  const path = route.path;
  if (path.includes('/dashboard')) return 'dashboard';
  if (path.includes('/cases') || path.includes('/new-case')) return 'cases';
  if (path.includes('/appointments')) return 'appointments';
  if (path.includes('/reports')) return 'reports';
  if (path.includes('/document-review')) return 'document-review';
  return '';
});

const handleLogout = () => {
  // Clear any authentication tokens or user data
  localStorage.removeItem('token');
  localStorage.removeItem('user');
  localStorage.removeItem('username');
  localStorage.removeItem('accountType');
  
  // Redirect to login page
  router.push('/login');
};

// 如果当前路径是document-review但不是上级账号，重定向到dashboard
onMounted(() => {
  if (route.path.includes('/document-review') && !isSuperiorAccount.value) {
    router.push('/dashboard');
  }
});
</script>

<style scoped>
.main-layout {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  padding-top: 64px; /* 为固定的header留出空间 */
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
  width: 100%;
  flex: 1;
  position: relative;
}
</style>
